<template>
  <div>
    <div style="margin-bottom: 16px;display: flex;justify-content: flex-end;">
      <ElInput :prefix-icon="Search" v-model="queryScoreParams.userPhone" placeholder="请输入手机号"
        style="width: 200px;margin-left: 16px;" @change="handleUserChange" clearable />
    </div>
    <ReTable :data="scoreList" :columns="scoreColumns" :pagination="pagination" @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <template #accuracy="{ row }">
        {{ row.accuracy * 100 }}%
      </template>
    </ReTable>
  </div>
</template>

<script setup lang="ts">
import ReTable from '@/components/ReTable';
import { Search } from '@element-plus/icons-vue';
import { getScoreList } from '@/api/score';
import { onMounted } from 'vue';
import { ref } from 'vue';

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "ScoreManage"
});

// 成绩管理列表数据
const scoreList = ref([]);
// 成绩管理表格列配置
const scoreColumns = [
  {
    prop: 'serialNo',
    label: '序号',
    align: 'center'
  },
  {
    prop: 'paperName',
    label: '试卷名',
    align: 'center'
  },
  {
    prop: 'userPhone',
    label: '用户手机号',
    align: 'center'
  },
  {
    prop: 'score',
    label: '得分',
    align: 'center'
  },
  {
    prop: 'accuracy',
    label: '正确率',
    align: 'center',
    slotName: 'accuracy'
  },
  {
    prop: 'examCount',
    label: '考试次数',
    align: 'center'
  },
  {
    prop: 'gmtModified',
    label: '修改时间',
    align: 'center'
  }
]

// 分页数据
const pagination = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10
})

// 查询成绩参数
const queryScoreParams = ref({
  pageNum: 1,
  pageSize: 10,
  userPhone: '',
})

// 查询成绩管理
const queryScoreList = () => {
  getScoreList(queryScoreParams.value).then(res => {
    scoreList.value = res.data.records.map((item, index) => {
      item.serialNo = index + 1
      return item
    })
    pagination.value.total = res.data.total
  })
}

// 输入手机号
const handleUserChange = (val) => {
  queryScoreParams.value.userPhone = val
  queryScoreList()
}

// 分页
const handleCurrentChange = (val) => {
  queryScoreParams.value.pageNum = val
  queryScoreList()
}

// size改变
const handleSizeChange = (val) => {
  queryScoreParams.value.pageSize = val
  queryScoreList()
}

onMounted(() => {
  queryScoreList()
})

</script>